<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card>
        <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
            <Card>
                <header>
                 <Row>
                   <span>客户姓名:</span>
                    <Input v-model="paymentDetail.custName" style="width: 170px" />
                     <span style="width: 200px;margin-left: 20px;">还款方式:</span>
                    <Select v-model="paymentDetail.paymentWay" class="v-select-wrapper" style="width:150px">
                        <Option v-for="item in paymentWayList" :value="item.styleCode" :key="item.styleCode">{{ item.styleName}}</Option>
                    </Select>
                    <span style="width: 200px;margin-left: 20px;">产品:</span>
                    <Select v-model="paymentDetail.productType" class="v-select-wrapper" style="width:150px">
                        <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{ item.productTypeName }}</Option>
                    </Select>
                       <span style="width: 200px;margin-left: 20px;">资金方:</span>
                    <Select v-model="paymentDetail.fundSource" class="v-select-wrapper" style="width:159px">
                        <Option v-for="item in fundList" :value="item.fundCode" :key="item.fundCode">{{ item.fundName}}</Option>
                    </Select>
                    <span style="width: 200px;margin-left: 20px;">代扣日期(起):</span>
                    <DatePicker v-model="paymentDetail.tranctionBeginDate" type="date" style="width: 150px"></DatePicker>
                    <span style="width: 200px;margin-left: 5px;">-</span>
                    <span style="width: 200px;margin-left: 5px;">代扣日期(止):</span>
                    <DatePicker v-model="paymentDetail.tranctionEndDate" type="date" placement="bottom-end"  style="width: 150px"></DatePicker>
                    </Row>
                     <Row style="margin-top:20px">
                    <span>身份证号码:</span>
                    <Input v-model="paymentDetail.custCardNo" style="width: 158px" />

                     <span style="width: 200px;margin-left: 20px;">支付通道:</span>
                    <Select v-model="paymentDetail.paymentChannel" class="v-select-wrapper" style="width:150px">
                        <Option v-for="item in paymentChannelList" :value="item.value" :key="item.value">{{ item.label}}</Option>
                    </Select>
                    <Button type="primary" @click="listQuery"   style="margin-left: 20px;">查询</Button>
                    <Button type="primary" @click="downLoad"   style="margin-left: 20px;">下载</Button>
                     </Row>
                </header>
            </Card>
            <Card>
                <div>
                    <Table border :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
                </div>
                <div style="text-align: center;margin-top: 36px;">
                    <Page :total="paymentDetail.total" :current="paymentDetail.pageNum" :page-size="paymentDetail.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
                </div>
            </Card>
        </Form>
    </Card>
</template>

<script>
import expandRow from './withhold-detail-query-tableExpand.vue'
export default {
  name: 'mutative-router',
  components: { expandRow },
  data () {
    return {
      paymentDetail: {
        tranctionBeginDate: '',
        tranctionEndDate: '',
        custName: '',
        custCardNo: '',
        productType: '',
        paymentWay: '',
        fundSource: '',
        paymentChannel: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      productList: [],
      paymentChannelList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '001',
          label: '快付通（云科谷）'
        },
        {
          value: '002',
          label: '宝付（云科谷）'
        },
        {
          value: '003',
          label: '宝付（口袋）'
        },
        {
          value: '004',
          label: '宝付（渤海）'
        },
        {
          value: '005',
          label: '支付宝'
        },
        {
          value: '006',
          label: '运营'
        }
      ],
      paymentWayList: [],
      fundList: [],
      orderColumns: [
        {
          type: 'expand',
          width: 30,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          type: 'index',
          title: '序号',
          width: 60,
          align: 'center',
          className: 'tbake'
        },
        {
          title: '进件号',
          key: 'loanId',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '客户身份证',
          key: 'custCardNo',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        // {
        //   title: '电话号码',
        //   key: 'mobile',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // },
        {
          title: '产品',
          key: 'productName',
          align: 'center',
          width: 120,
          className: 'tbake'
        },
        {
          title: '资金方',
          key: 'fundName',
          align: 'center',
          width: 120,
          className: 'tbake'
        },
        {
          title: '交易时间',
          key: 'tranctionDate',
          align: 'center',
          width: 120,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.tranctionDate))
            ])
          }
        },
        {
          title: '扣款金额',
          key: 'amountAct',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '还款类型',
          key: 'repayStyle',
          align: 'center',
          width: 100,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.repayStyle === '1') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '自动代扣')
            }
            if (params.row.repayStyle === '2') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '主动还款')
            }
            if (params.row.repayStyle === '3') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.repayStyle === '4') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '主动还款')
            }
            if (params.row.repayStyle === '5') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '下期还款')
            }
            if (params.row.repayStyle === '6') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '手动代扣')
            }
            if (params.row.repayStyle === '9') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '支付宝还款')
            }
            if (params.row.repayStyle === '10') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '支付宝提前结清')
            }
          }
        },
        // {
        //   title: '银行名称',
        //   key: 'bankName',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // },
        // {
        //   title: '银行卡号',
        //   key: 'bankCardNo',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // },
        {
          title: '支付通道',
          key: 'resChannel',
          align: 'center',
          width: 120,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.resChannel === '001') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '快付通（云科谷）')
            }
            if (params.row.resChannel === '002') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '宝付（云科谷）')
            }
            if (params.row.resChannel === '003') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '宝付（口袋）')
            }
            if (params.row.resChannel === '004') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '宝付（渤海）')
            }
            if (params.row.resChannel === '005') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '支付宝')
            }
            if (params.row.resChannel === '006') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '运营')
            }
          }
        },
        // {
        //   title: '产品渠道',
        //   key: 'channelName',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // },
        {
          title: '返回信息',
          key: 'rtnResponseMsg',
          align: 'center',
          width: 200,
          className: 'tbake'
        },
        {
          title: '订单号',
          key: 'rtnOrderNo',
          align: 'center',
          className: 'tbake'
        }

      ],
      orderData: []

    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    var vm = this
    var tmpDate = new Date()
    var tmpEndDate = new Date()
    tmpEndDate.setDate(tmpEndDate.getDate() + 1)
    vm.paymentDetail.paymentEndDate = tmpEndDate
    tmpDate.setDate(tmpDate.getDate())
    vm.paymentDetail.paymentBeginDate = tmpDate
    this.screenConditon()
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.paymentDetail.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.paymentDetail.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/loanPayment/service/withholdDetailList', vm.paymentDetail).then(re => {
        var data = re.data
        vm.orderData = data.data.list
        vm.paymentDetail.total = data.data.total
        vm.statisticsData = data.data.statisticsData
      }).catch(er => {

      })
    },
    downLoad () {
      document.getElementById('exportList').action = this.$appContext.marvels_core_financial + 'financial/loan/loanPayment/service/downLoadWithholdDetail'
      document.getElementById('exportList').submit()
    },
    screenConditon () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/balanceAccount/service/listScreenCondition').then(re => {
        var data = re.data
        vm.fundList.push({ 'fundCode': '', 'fundName': '请选择' })
        for (var fundLength = 0; fundLength < data.data.fundList.length; fundLength++) {
          vm.fundList.push(data.data.fundList[fundLength])
        }
        vm.productList.push({ 'productType': '', 'productTypeName': '请选择' })
        for (var productLength = 0; productLength < data.data.productList.length; productLength++) {
          vm.productList.push(data.data.productList[productLength])
        }
        vm.paymentWayList.push({ 'styleCode': '', 'styleName': '请选择' })
        for (var paymentWayLength = 0; paymentWayLength < data.data.payStyleList.length; paymentWayLength++) {
          vm.paymentWayList.push(data.data.payStyleList[paymentWayLength])
        }
      }).catch(er => {

      })
    }
  }
}
</script>
<style>
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
</style>
